{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}Grondsoort{% endblock %}
{% block extrastyle %}
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
	<style>
		.info {
		    padding: 6px 8px;
		    font: 14px/16px Arial, Helvetica, sans-serif;
		    background: white;
		    background: rgba(255,255,255,0.8);
		    box-shadow: 0 0 15px rgba(0,0,0,0.2);
		    border-radius: 5px;
		}
		.info h4 {
		    margin: 0 0 2px;
		    color: #777;
		}
		body,html {
			height: 100%;
			margin: 0px;
		}
		.wrapper, .fill
		{
			height: 100%;
		} 
		#map {
			width: 100%;
			height: 100%;
		}
		
	</style>
{% endblock %}
{% block script %}
{{block.super}}
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<!-- <script src="/static/js/leaflet.ajax.min.js"></script> -->
<!-- <script src="/static/js/bodemkaart.js" type="text/javascript"></script> -->
<script src="/static/leaflet/layer/tile/Google.js"></script>
<script>
	var geojson;
	var map;
	var info = L.control();

	function fitAddress(map, address) {
		var geocoder = new google.maps.Geocoder();
		if (geocoder) {
		   geocoder.geocode({ 'address': address }, function (results, status) {
		     if (status == google.maps.GeocoderStatus.OK) {
		         var b = results[0].geometry.viewport;
		         var ne = b.getNorthEast();
		         var sw = b.getSouthWest();
		         map.fitBounds([[sw.lat(), sw.lng()],
		                        [ne.lat(), ne.lng()]]);	     
		     }
		   });
		}
	}

	function getColor(d) {
		if (d == 'zand')
			return '#FFFF66';
		if (d == 'klei')
			return '#009900';
		if (d == 'veen')
			return '#FF3399';
		if (d =='zoet water')
			return 'powderblue';
		if (d =='stedelijk gebied')
			return 'lightgray';
		return 'white';
	}
 
	function style(feature) {
	    return {
	        fillColor: getColor(feature.properties.grond2),
	         weight: 1,
	         opacity: 1,
	         color: 'None',
	        fillOpacity: 0.3
	    };
	}

	function highlightFeature(e) {
	    var layer = e.target;

	    layer.setStyle({
	        weight: 1,
	        color: 'white',
	        dashArray: '',
	        fillOpacity: 0.6
	    });

	    if (!L.Browser.ie && !L.Browser.opera) {
	        layer.bringToFront();
	    }
	    info.update(layer.feature.properties);
	}

	function resetHighlight(e) {
	    geojson.resetStyle(e.target);
	    info.update();
	}

	function zoomToFeature(e) {
	    map.fitBounds(e.target.getBounds());
	}

	function onEachFeature(feature, layer) {
	    layer.on({
	        mouseover: highlightFeature,
	        mouseout: resetHighlight,
	        click: zoomToFeature
	    });
	}

	function initialize() {
		map = new L.Map('map');
		fitAddress(map,'Noord-Holland');
		var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
		var ggl = new L.Google();
		var ggl1 = new L.Google('ROADMAP');
		var ggl2 = new L.Google('TERRAIN');
		grondsoort = {{grondsoort|safe}};
		geojson = new L.geoJson(grondsoort, {
	        style: style,
	        onEachFeature: onEachFeature
	    });
		var baseMaps = {'Open Streetmap':osm, 'Google':ggl1, 'Satelliet': ggl, 'Terrein':ggl2};
		var overlayMaps = {'Grondsoort': geojson };
		L.control.layers(baseMaps, overlayMaps).addTo(map);	
		map.addLayer(osm);
		map.addLayer(geojson);

		info.onAdd = function (map) {
		    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
		    this.update();
		    return this._div;
		};
		info.update = function (props) {
			if (props) {
		    	this._div.innerHTML = '<h4>Grondsoort: ' +  (props.grond2 || "onbekend") + '</h4>';
				this._div.style.display='block';
			}
			else
				this._div.style.display='none';
		};

		info.addTo(map);
	}
	$(function(){initialize();});
</script>
{% endblock %}
{% block content %}
<div class="container-fluid fill">
<div id="map"></div>
</div>
{% endblock content %}
